<!--
 * @Author: your name
 * @Date: 2021-08-31 22:28:39
 * @LastEditTime: 2021-09-01 15:03:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\components\Switch\Switch.vue
-->
<template>
    <div class="Switch">
        <span> {{ title }}</span>
        <Switch
            v-bind="getBindValue"
            :disabled="disabled"
            :checked-children="checkedChildren"
            :un-checked-children="unCheckedChildren"
            @change="handleChange"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, computed, ref, unref } from 'vue'
import { Switch } from 'ant-design-vue'

export default defineComponent({
    name: 'SwitchItem',
    components: { Switch },
    props: {
        disabled: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },
        checkedChildren: {
            type: String,
        },
        unCheckedChildren: {
            type: String,
        },
        checktype: {
            type: Boolean,
        },
    },
    setup(props, { emit }) {
    // 使用Switch 必须动态改变 checked 状态太会生效
        const getBindValue = computed(() => ({ checked: unref(props.checktype) }))
        function handleChange(e) {
            emit('change', e)
        }
        return {
            getBindValue,
            handleChange,
        }
    },
})
</script>
<style lang="less" scoped>
.Switch {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
  & > span {
    font-size: 12px;
  }
}
</style>
